<template>
  <div>
    <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>
    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <!-- <div class="hs-screen-row">
        <Input v-model.trim="params.poiName" placeholder="请输入工厂名称" />
      </div> -->
      <div class="hs-screen-row">
        <Input v-model.trim="params.factoryCode" placeholder="请输入工厂编码" />
      </div>

      <div class="hs-screen-row">
        <Button type="primary" @click="queryProgramList">查询</Button>
      </div>
      <div class="hs-screen-row">
        <Button @click="resetScreen">重置</Button>
      </div>
    </Card>

    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <!--标题-->
      <div slot="title">
        <div class="hs-screen-box">
          <div>工厂列表</div>
          <div>
            <ButtonGroup>
              <Button @click="queryProgramList">
                <Icon type="md-refresh" size="15" />
              </Button>
              <Button @click="showProgramOpe(2)">新增工厂</Button>
            </ButtonGroup>
          </div>
        </div>
      </div>
      <!--表格数据-->
      <Table
        row-key="goodsMallTypeId"
        :columns="columns"
        :data="data"
        size="small"
        :stripe="true"
        :loading="isTableLoading"
      >
        <template slot-scope="{ row }" slot="isUse">
          <i-switch
            v-model="row.isUse == 1"
            @on-change="updateIsUesHandle(row)"
          >
            <template #open>
              <span>是</span>
            </template>
            <template #close>
              <span>否</span>
            </template>
          </i-switch>
        </template>
        <template slot-scope="{ row }" slot="action">
          <Button
            type="success"
            size="small"
            style="margin-right: 5px"
            @click="showProgramOpe(1, row)"
          >
            查看
          </Button>
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="showProgramOpe(3, row)"
          >
            编辑
          </Button>
          <!-- <Button
            type="warning"
            size="small"
            style="margin-right: 5px"
            @click="resetFactoryHandle(row)"
          >
            重置
          </Button> -->
          <Button
            type="error"
            size="small"
            @click.native="delProgramHandle(row)"
          >
            删除
          </Button>
        </template>
      </Table>
      <!--分页-->
      <div class="hs-page">
        <Page
          :total="total"
          show-sizer
          show-total
          transfer
          @on-change="changePage"
          @on-page-size-change="changePageSize"
        />
      </div>
    </Card>

    <!--显示模态框-->
    <factory-ope ref="programOpe" @changeDate="queryProgramList"></factory-ope>
  </div>
</template>

<script>
  import hsBreadcrumb from '@/components/hs-breadcrumb';
  import factoryOpe from './components/factory-ope';
  import { platformList } from '@/constant/program';
  import { omitBy } from 'lodash';

  export default {
    name: 'factoryList',
    data() {
      return {
        total: 0,
        platformList,
        isTableLoading: false,
        // 参数
        params: {
          factoryCode: '',
          poiName: '',
          page: 1,
          rows: 10
        },
        // 表格列
        columns: [
          {
            title: '工厂名称',
            minWidth: 200,
            key: 'poiName'
          },
          {
            title: '工厂编码',
            minWidth: 70,
            key: 'factoryCode'
          },
          {
            title: '省',
            minWidth: 50,
            key: 'province'
          },
          {
            title: '市',
            minWidth: 50,
            key: 'city'
          },
          {
            title: '县',
            minWidth: 50,
            key: 'county'
          },
          {
            title: '地址',
            minWidth: 180,
            key: 'address'
          },
          {
            title: '电话',
            minWidth: 120,
            key: 'mobile'
          },
          {
            title: '收件联系人',
            minWidth: 120,
            key: 'contact'
          },
          {
            title: '是否使用',
            minWidth: 70,
            slot: 'isUse'
          },
          {
            title: '操作',
            slot: 'action',
            width: 180,
            align: 'center'
          }
        ],
        // 表格数据
        data: [],
        // 面包屑
        breadcrumb: [
          { name: '首页', url: '', icon: 'ios-home-outline', size: 18 },
          { name: '系统管理', url: '', icon: '', size: 0 },
          { name: '工厂管理', url: '', icon: '', size: 0 }
        ]
      };
    },
    created() {
      // 分类-列表查询
      this.queryProgramList();
    },
    methods: {
      updateIsUesHandle(row) {
        this.axios
          .get('/factory/openFactory', {
            params: {
              factoryCode: row.factoryCode,
              isUse: row.isUse == 1 ? 0 : 1
            }
          })
          .then(res => {
            console.log(res);
          });
      },
      // 分类-列表查询
      queryProgramList() {
        this.isTableLoading = true;
        const params = omitBy(this.params, value => value === '' || value === null);
        this.axios.post('/factory/findList', params).then(res => {
          this.isTableLoading = false;
          if (res.status == 200) {
            this.total = res.data.total;
            this.data = res.data.rows.map(item => ({
              ...item,
              platformName: (
                platformList.find(item2 => item2.value == item.platform) || {}
              ).label
            }));
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: '服务器内部错误',
              desc: '查工厂列表接口报错',
              duration: 0
            });
          }
        });
      },
      // 是否删除分类
      delProgramHandle(row) {
        this.$Modal.confirm({
          title: `是否删除工厂${row.poiName}？`,
          onOk: () => {
            // this.$Message.info('您点击了确定.');
            this.delProgram(row);
          },
          onCancel: () => {
            this.$Message.info('您点击了取消.');
          }
        });
      },
      // 删除分类
      delProgram(row) {
        this.$Spin.show();
        this.axios
          .post('/factory/deleteFactory', {
            factoryCode: row.factoryCode
          })
          .then(res => {
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            if (res.status == 200) {
              this.$Message.success('操作成功.');
              this.queryProgramList();
            }
            if (res.status == 201) {
              // this.$Message.error(res.msg);
              this.$Notice.error({
                title: '删除工厂失败',
                desc: res.msg
              });
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '删除工厂接口报错',
                duration: 0
              });
            }
          });
      },
      // 显示操作模态框
      showProgramOpe(type, row) {
        /**
         * type判断
         * 1.查看 2.新增 3.编辑
         */
        this.$refs.programOpe.show(type, row);
      },
      resetFactoryHandle(row) {
        // /factory/resetFactoryCache
        this.$Modal.confirm({
          title: `是否重置工厂及分配规则${row.poiName}？`,
          onOk: () => {
            this.axios.post('/factory/resetFactoryCache', {
              params: { factoryCode: row.factoryCode }
            });
          },
          onCancel: () => {
            this.$Message.info('您点击了取消.');
          }
        });
      },
      // 重置筛选条件
      resetScreen() {
        this.params = {
          factoryCode: '',
          poiName: '',
          page: 1,
          rows: 10
        };
        this.queryProgramList();
      },
      // 改变页数
      changePage(e) {
        this.params.page = e;
        this.queryProgramList();
      },
      // 改变页容量
      changePageSize(e) {
        this.params.rows = e;
        this.queryProgramList();
      }
    },
    components: {
      hsBreadcrumb,
      factoryOpe
    }
  };
</script>

<style scoped>
  .j-type-image {
    padding: 5px;
    width: 50px;
    height: 50px;
  }
  .j-type-image img {
    width: auto;
    height: 100%;
  }
</style>
